<template>
  <div class="wrapper">
    <!-- 头部-banner -->
    <lsl-header :url="1"></lsl-header>
    <lsl-banner :imgs="banner"></lsl-banner>
    <div class="container" :class="$style.content">
      <!-- 左侧导航栏 -->
      <lsl-aside
        :aside-list="asides"
        @bind-current="parentListen"
        >
        <h2>About us</h2>
        <p>品牌故事</p>
      </lsl-aside>

      <div :class="$style.main">
        <div :class="$style['main-title']">
          {{asides[current].title}}
        </div>
        <div :class="$style['main-text']" v-html="asides[current].content"></div>
      </div>
    </div>
    <lsl-footer></lsl-footer>
  </div>
</template>

<script>
export default {
  metaInfo: {
    title: '品牌故事-安徽鹤年堂中药饮片有限公司', // set a title
    meta: [   // set meta
      {                
        name: 'keyWords',
        content: '北京鹤年堂,传统配方,道地原料'
      },
      {
        name: 'description',
        content: '鹤年堂始建于明朝永乐三年,是历史悠久的国医老字号,形成了独具特色的以’调元气 养太和’为内涵,集诊疗/药膳/食养/动调一体的中医养生文化.安徽鹤年堂位于亳州,在继承传统国药精髓基础上,不断推进中药材的产业化经营.'
      }
    ]
  },
  name: 'Company',
  data() {
    return {
      banner: require('../assets/img/about.jpg'),
      asides: [{
        title: '',
        content: ''
      }],
      current: 0
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 初始化数据
      this.$dataPost('/api/cms/about/list', {
        'pageSize': '10',
        'pageNumber': '1'
      }, (res) => {
        this.asides = res.data.list;
      })
    },
    parentListen(index) {
      // 获取子组件的下标
      this.current = index;
    }
  }
}
</script>

<style lang="scss" module>
  .content {
    display: flex;

    .main {
      flex: 1;
      padding-left: 20px;
      padding-bottom: 40px;

      .main-title {
        font-size: 32px;
        color: #D2393D;
        text-align: center;
        margin: 35px 0;
      }
      .main-text p {
        line-height: 1.8em;
      }
    }
  }
</style>